<template>
  <div>
    <el-row>
      <el-col :span="8">
        <span class="stocks-title">请输入编号:</span>
      </el-col>
      <el-col :span="10">
        <el-input
            placeholder="多位用“,”隔开"
            prefix-icon="el-icon-search"
            v-model="input">
        </el-input>
      </el-col>
      <el-col :span="3">
        <el-button icon="el-icon-search" @click="search" round>查询</el-button>
      </el-col>
    </el-row>
    <!--        这个要查询后出现-->
    <el-table :data="stocksData1" border stripe style="width: 100%" height="150" class="stocks-table" v-if="show">
      <el-table-column prop="name" fixed label="股票名字" width="100"></el-table-column>
      <el-table-column prop="number" label="股票编号" width="100"></el-table-column>
      <el-table-column prop="opening_price" label="今日开盘价" width="100"></el-table-column>
      <el-table-column prop="closing_price" label="昨日收盘价" width="100"></el-table-column>
      <el-table-column prop="current_price" label="当前价格" width="100"></el-table-column>
      <el-table-column prop="highest_price" label="今日最高价" width="100"></el-table-column>
      <el-table-column prop="lowest_price" label="今日最低价" width="100"></el-table-column>
      <el-table-column prop="bidding_price" label="竞买价" width="100"></el-table-column>
      <el-table-column prop="number_traded" label="竞卖价" width="100"></el-table-column>
      <el-table-column prop="transaction_amount" label="成交的股票数" width="120"></el-table-column>
      <el-table-column prop="buy_application" label="买一申请" width="100"></el-table-column>
      <el-table-column prop="buy_price" label="买一报价" width="100"></el-table-column>
      <el-table-column prop="sell_declares" label="卖一申报" width="100"></el-table-column>
      <el-table-column prop="Sell_offer" label="卖一报价" width="100"></el-table-column>
      <el-table-column prop="date" label="日期" width="100"></el-table-column>
      <el-table-column prop="time" label="时间" width="100"></el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-circle-plus-outline" @click="submit(scope.$index)">
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row class="stocks-favorites">收藏的股票</el-row>
    <el-table :data="stocksData2" border stripe style="width: 100%" height="150" class="stocks-table">
      <el-table-column prop="name" fixed label="股票名字" width="100"></el-table-column>
      <el-table-column prop="number" label="股票编号" width="100"></el-table-column>
      <el-table-column prop="opening_price" label="今日开盘价" width="100"></el-table-column>
      <el-table-column prop="closing_price" label="昨日收盘价" width="100"></el-table-column>
      <el-table-column prop="current_price" label="当前价格" width="100"></el-table-column>
      <el-table-column prop="highest_price" label="今日最高价" width="100"></el-table-column>
      <el-table-column prop="lowest_price" label="今日最低价" width="100"></el-table-column>
      <el-table-column prop="bidding_price" label="竞买价" width="100"></el-table-column>
      <el-table-column prop="number_traded" label="竞卖价" width="100"></el-table-column>
      <el-table-column prop="transaction_amount" label="成交的股票数" width="120"></el-table-column>
      <el-table-column prop="buy_application" label="买一申请" width="100"></el-table-column>
      <el-table-column prop="buy_price" label="买一报价" width="100"></el-table-column>
      <el-table-column prop="sell_declares" label="卖一申报" width="100"></el-table-column>
      <el-table-column prop="Sell_offer" label="卖一报价" width="100"></el-table-column>
      <el-table-column prop="date" label="日期" width="100"></el-table-column>
      <el-table-column prop="time" label="时间" width="100"></el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-remove-outline" @click="del(scope.$index)">
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "finance-table-stocks",
  data() {
    return {
      stocksData1: [{
        name: '',
        number: '',
        opening_price: '',
        closing_price: '',
        current_price: '',
        highest_price: '',
        lowest_price: '',
        bid_price: '',
        bidding_price: '',
        number_traded: '',
        transaction_amount: '',
        buy_application: '',
        buy_price: '',
        sell_declares: '',
        sell_offer: '',
        date: '',
        time: ''
      }],
      stocksData2: [{
        name: '',
        number: '',
        opening_price: '',
        closing_price: '',
        current_price: '',
        highest_price: '',
        lowest_price: '',
        bid_price: '',
        bidding_price: '',
        number_traded: '',
        transaction_amount: '',
        buy_application: '',
        buy_price: '',
        sell_declares: '',
        sell_offer: '',
        date: '',
        time: ''
      }],
      input: '',
      show: false,
    }
  },
  mounted() {
    this.load();
  },
  methods: {
    submit(i) {
      //向后端要数据
      this.$http.post("http://localhost:9000/finances/addFinances", {
        financesNumber: this.stocksData1[i].number,
        financesId: 3,
        userId: sessionStorage.getItem("token")
      }).then((res) => {
        if (res.data === "ok") {
          this.$notify({
            title: '成功',
            message: '添加成功',
            type: 'success'
          });
        } else {
          this.$notify({
            title: '警告',
            message: '已添加',
            type: 'warning'
          });
        }
      }).catch(() => {
        this.$notify({
          title: '警告',
          message: '已添加',
          type: 'warning'
        });
      })
      setTimeout(() => {
        this.load()
      }, 1000)
    },
    del(i) {
      //向后端要数据
      this.$http.post("http://localhost:9000/finances/deleteFinances", {
        financesNumber: this.stocksData2[i].number,
        financesId: 3,
        userId: sessionStorage.getItem("token")
      }).then((res) => {
        if (res.data === "ok") {
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success'
          });
        } else {
          this.$notify.error({
            title: '错误',
            message: '删除失败'
          });
        }
      }).catch(() => {
        this.$notify.error({
          title: '错误',
          message: '删除失败'
        });
      })
      this.stocksData2.splice(i, 1)
    },
    load() {
      this.stocksData2.length = 0
      //向后端要数据
      this.$http.post("http://localhost:9000/finances/selectFinances", {
        userId: sessionStorage.getItem("token"),
        financesId: 3
      }).then((res) => {
        if (res.data.length > 0) {
          this.$http
              .get('/api/list=' + res.data.join(","))
              .then(response => {
                    let data = response.data.split("\"");
                    for (let i = 1; i < data.length; i += 2) {
                      let re = response.data.split("\"")[i].split(",");
                      if (re[0] !== "FAILED" && re[0] !== "") {
                        this.stocksData2.push({
                          name: re[0],
                          number: res.data[Math.floor(i / 2)],
                          opening_price: re[1],
                          closing_price: re[2],
                          current_price: re[3],
                          highest_price: re[4],
                          lowest_price: re[5],
                          bid_price: re[6],
                          bidding_price: re[7],
                          number_traded: re[8],
                          transaction_amount: re[9],
                          buy_application: re[10],
                          buy_price: re[11],
                          sell_declares: re[20],
                          sell_offer: re[21],
                          date: re[30],
                          time: re[31]
                        })
                      }
                    }
                  }
              )
        } else {
          console.log('查询为空')
        }
      }).catch(() => {
        console.log('查询失败')
      })
    },
    search() {
      this.show = false
      this.stocksData1.length = 0
      this.error = ""
      this.$http
          .get('/api/list=' + this.input)
          .then(response => {
                let inp = this.input.split(",")
                let data = response.data.split("\"");
                for (let i = 1; i < data.length; i += 2) {
                  let re = response.data.split("\"")[i].split(",");
                  if (re[0] !== "FAILED" && re[0] !== "") {
                    this.stocksData1.push({
                      name: re[0],
                      number: inp[Math.floor(i / 2)],
                      opening_price: re[1],
                      closing_price: re[2],
                      current_price: re[3],
                      highest_price: re[4],
                      lowest_price: re[5],
                      bid_price: re[6],
                      bidding_price: re[7],
                      number_traded: re[8],
                      transaction_amount: re[9],
                      buy_application: re[10],
                      buy_price: re[11],
                      sell_declares: re[20],
                      sell_offer: re[21],
                      date: re[30],
                      time: re[31]
                    })
                    this.show = true;
                  }
                }
                if (this.show === false) {
                  this.$notify.error({
                    title: '错误',
                    message: '请输入正确编号'
                  });
                }
              }
          )
    }
  }
}
</script>

<style scoped>
.stocks-title {
  float: right;
  font-size: x-large
}

.stocks-table {
  width: 100%
}

.stocks-favorites {
  height: 50px;
  font-size: 30px;
  text-align: center
}
</style>
